<template>
  <div>
    <el-table
      :data="tableData"
      border
      show-header
      stripe
      style="width: 100%">
      <el-table-column
        fixed
        prop="cid"
        label="课号"
        width="150">
      </el-table-column>
      <el-table-column
        prop="cname"
        label="课程号"
        width="150">
      </el-table-column>
      <el-table-column
        prop="tid"
        label="教师号"
        width="150">
      </el-table-column>
      <el-table-column
        prop="tname"
        label="教师名称"
        width="150">
      </el-table-column>
      <el-table-column
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-popconfirm
            confirm-button-text='删除'
            cancel-button-text='取消'
            icon="el-icon-info"
            icon-color="red"
            title="删除不可复原"
            @confirm="deleteCourseTeacher(scope.row)"
          >
            <el-button slot="reference" type="text" size="small">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      @current-change="changePage"
    >
    </el-pagination>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  methods: {
    select (row) {
      console.log(row)
      const cid = row.cid
      const tid = row.tid
      const sid = sessionStorage.getItem('sid')
      const term = sessionStorage.getItem('currentTerm')
      const sct = {
        cid: cid,
        tid: tid,
        sid: sid,
        term: term
      }
      const that = this
      axios.post('http://localhost:9000/SCT/save', sct).then(function (resp) {
        if (resp.data === true) {
          that.$message({
            showClose: true,
            message: '选课成功',
            type: 'success'
          })
        } else {
          that.$message({
            showClose: true,
            message: '选课出错，请联系管理员',
            type: 'error'
          })
        }
      })

    },
    deleteCourseTeacher (row) {
      console.log(row.cid, row.tid)
      const rows = {
        cid: row.cid,
        tid: row.tid
      }
      const that = this
      axios.delete('http://localhost:9000/courseTeacher/deleteById', rows).then(function (resp) {

        if (resp.data === true) {
          that.$message({
            showClose: true,
            message: '删除成功',
            type: 'success'
          })
          window.location.reload()
        } else {
          that.$message({
            showClose: true,
            message: '删除出错，请查询数据库连接',
            type: 'error'
          })
        }
      })
    },
    changePage (page) {
      page = page - 1
      const that = this
      let start = page * that.pageSize, end = that.pageSize * (page + 1)
      let length = that.tmpList.length
      let ans = (end < length) ? end : length
      that.tableData = that.tmpList.slice(start, ans)
    },
  },

  data () {
    return {
      tableData: null,
      pageSize: 10,
      total: null,
      tmpList: null,
      type: sessionStorage.getItem('type')
    }
  },
  created () {
    axios.get('http://localhost:9000/courseTeacher/findCourseTeacherInfo').then(res => {
      console.log(res.data)
      this.tableData = res.data
    })
  }
}
</script>
